<template>
    <div id="memberAdd">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>供应商管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>添加供应商</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="form">
            <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" autoComplete="off">
              <el-form-item label="供应商名" prop="gname">
                <el-input v-model="ruleForm.gname" placeholder="供应商名，由汉字组成"></el-input>
              </el-form-item>

              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入正确的手机号码"></el-input>
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入正确的邮箱地址"></el-input>
              </el-form-item>
              
              <el-form-item label="地址" prop="dizhi">
                <el-input v-model="ruleForm.dizhi" placeholder="请输入地址"></el-input>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { addGongyingshang} from './../../../service/api/index.js'
  export default {
    data() {
      //用户名验证规则
      var validateGname = (rule,value,callback) =>{
          if (!value) {
              callback(new Error('供应商不能为空'));
          }
          if (!(/^[\u0391-\uFFE5]+$/.test(value))) {
             callback(new Error('供应商只能由汉字组成'));
          }
          callback();
      };
       //手机号码验证规则
      var validatePhone = (rule,value,callback) => {
           if (!value) {
              callback(new Error('手机号码不能为空'));
           } 
           if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(value))) {
               callback(new Error('请输入正确的手机号码'));
           }
           callback();
      };

       //邮箱验证规则
      var validateEmail = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入邮箱'));
        } else {
           if (!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value))) {
               callback(new Error('请输入正确的邮箱地址'));
           }
           callback();
        }
      };
      //地址验证规则
      var validateDizhi = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('地址不能为空'));
        } 
        callback();
      };
      return {
        ruleForm: {
          gname:'',
          phone:'',
          email: '',
          dizhi: '',
        },
        rules: {
          gname:[
              {validator:validateGname ,trigger:'blur'}
          ],
          phone:[
              {validator:validatePhone,trigger:'blur'}
          ],
          email: [
            { validator: validateEmail, trigger: 'blur' }
          ],
          dizhi: [
            { validator: validateDizhi, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
     async submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
               let res = await addGongyingshang(this.ruleForm.gname,this.ruleForm.phone,this.ruleForm.email,this.ruleForm.dizhi);
                console.log(res);
                if (res.status===200) {
                           this.$message({
                                message:'供应商添加成功',
                               type:'success'
                     });
                   this.$router.push({name:'gongyingshangList'}); 
                }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>>
<style lang="less" scope>
   #memberAdd{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .form{
      margin-left: 4rem;
      margin-right: 4rem;
   }
</style>